import store from '@/library/store'
/**
 * <span v-permisson:perm="add"></span>
 * <span v-permisson:role="['Admin', 'Tester']"></span>
 * //会实例化一个指令，但这个指令没有参数 
`v-xxx`
  
// -- 将值传到指令中
`v-xxx="value"`  
  
// -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"`
`v-xxx="'string'"` 
  
// -- 传参数（`arg`），如`v-bind:class="className"`
`v-xxx:arg="value"` 
  
// -- 使用修饰符（`modifier`）
`v-xxx:arg.modifier="value"` 
*/
const checkPermission =(key, value) =>{
  const permissions = store.getters && store.getters['auth/permissions']
  if(permissions[key] == undefined){
    throw new Error('need roles! Like v-perm:\'model\'="[\'admin\',\'editor\']"')
  }else{
    //console.dir(value instanceof Array)
    let values = value instanceof Array? value: [value]
    const flag = permissions[key].some(perm=>{
      return values.includes(perm)
    })
    return flag
  }
}
export default {
  mounted(el, binding) {   
    const {value, arg} = binding // 获取到指令绑定的值
    if(arg == undefined){
      throw new Error('need roles! Like v-perm:\'model\'="[\'admin\',\'editor\']"')
    }
    // 权限认证
    if(!checkPermission(arg.toLowerCase(), value)){
      // 判断如果当前登录人没有这个元素绑定的权限，就把这个元素移除，所以没有权限的人就看不到这个内容了
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}